<!--个人信息-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>个人信息</title>
    <link rel="stylesheet" type="text/css" th:href="@{/mb/css/shopping-mall-index.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/mb/css/style.css}" />
    <link th:href="@{/mb/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/css.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/Animation.css}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" th:href="@{/layui/dist/css/layui.css}"  media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/style/container.css}">

    <!--结束-->
</head>
<style type="text/css">
.input-file input[type="file"] {
position: absolute;
top: 0;
right: 0;
height: 40px;
opacity: 0;
}
</style>
<style type="text/css">
    .fileinput-button {
        position: relative;
        display: inline-block;
        overflow: hidden;
    }

    .fileinput-button input {
        position: absolute;
        right: 0px;
        top: 0px;
        opacity: 0;
        -ms-filter: 'alpha(opacity=0)';
        font-size: 300px;
    }

</style>

<body style="background-color: white">
<!--nav-->
<!--头开始-->
<header class="navbar-fixed-top headerbg" th:each="codeUser:${codeUsers}">
    <!--左上角logo-->
    <div class="logo">
        <a href="http://www.baidu.com" th:href="@{/mc/logged/loginIndex(userNo=${codeUser.userNo})}" class="fl mt10">
            <img th:src="@{/mb/images/mclogo.png}" style="margin-top: -30px;margin-left: 30px" alt=""></a></div>

    <!--导航栏剩余部分-->
    <div class="navBox hidden-xs hidden-sm" style="float: right;margin-right: 10%">
        <ul class="navList list-unstyled">
            <li class="navLi">
                <h3>
                    <a th:href="@{/mc/logged/loginIndex(userNo=${codeUser.userNo})}"><span>首页</span></a>
                </h3>
            </li>
            <li class="navLi"><h3><a href="#" th:href="@{/mc/item/loginItemsList(userNo=${codeUser.userNo})}"><span>项目</span></a>
            </h3></li>

            <li class="navLi">
                <h3>
                    <div th:if="${codeUser.type}==1">
                        <a href="#" th:href="@{/mc/item/myRelease(userNo=${codeUser.userNo})}"><span>我的发布</span></a>
                    </div>
                </h3>
            </li>

            <li class="navLi">
                <h3>
                        <span th:if="${codeUser.type}==1">
                            <a href="#" th:href="@{/mc/item/releaseProject(userNo=${codeUser.userNo})}"><span>项目发布</span></a></span>
                </h3>
            </li>
            <li class="navLi">
                <h3>
                        <span th:if="${codeUser.type}==2">
                            <a href="#" th:href="@{/mc/stage/participatingProjects(userNo=${codeUser.userNo})}"><span>我的参与</span></a></span>
                </h3>
            </li>
            <li class="navLi"><h3><a href="#" th:href="@{/mc/logged/help(userNo=${codeUser.userNo})}"><span>帮助</span></a></h3>
            </li>
            <li class="navLi"><h3>
                <span th:if="${codeUser.image}">
                <img th:src="@{'/article/'+ ${codeUser.image}}" height="60px" width="60px"> </span>
                <span th:unless="${codeUser.image}">
                <img th:src="@{/images/center.png}" height="60px" width="60px">
                </span></h3>
                <div class="navSub">
                    <ul class="navSubList list-unstyled">
                        <li class="navSubLi">
                            <h4><a style="text-decoration: none" th:text="'hello，'+${codeUser.nickName}">hello，xxx</a>
                            </h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/logged/userInformation(userNo=${codeUser.userNo})}">● 个人中心</a></h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/logged/moneyPay(userNo=${codeUser.userNo})}">● 我的开发宝</a></h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/item/myCollection(userNo=${codeUser.userNo})}">● 我的收藏</a></h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/logged/advise(userNo=${codeUser.userNo})}">● 我要建议</a></h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/}">● 退出登录</a></h4>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</header>
<!--头结尾-->
<!--动态线条-->
<div class="bannerN animated" style="height: 200px">
    <div class="imgFull"><img class="img-responsive" th:src="@{/mb/images/ab_bg_01.png}"></div>
    <div class="clouds_one"></div>
    <div class="clouds_two"></div>
    <div class="clouds_three"></div>
</div>
<!--动态线条结尾-->



<div class="personal w1200" style="align-content: center; width: 900px;margin-top: 50px;margin-bottom: 50px">
    <div class="personal-left f-l">
        <div class="personal-l-tit">
            <h3>个人中心</h3>
        </div>
        <ul th:each="codeUser:${codeUsers}">
            <li class="current-li per-li1"><a th:href="@{/mc/logged/userInformation(userNo=${codeUser.userNo})}">个人资料<span>></span></a></li>
            <li class="per-li2"><a th:href="@{/mc/logged/moneyPay(userNo=${codeUser.userNo})}">开发宝余额<span>></span></a></li>
            <li class="per-li3"><a href="#"th:href="@{/mc/logged/password(userNo=${codeUser.userNo})}">设置支付密码<span>></span></a></li>
            <li class="per-li4"><a th:href="@{/mc/item/myCollection(userNo=${codeUser.userNo})}">我收藏的项目<span>></span></a></li>
            <li class="per-li5"><a th:href="@{/mc/logged/advise(userNo=${codeUser.userNo})}">我要建议<span>></span></a></li>
        </ul>
    </div>
    <div class="personal-r f-r"style="width: 650px;margin-left: 10px">
        <div class="personal-right" th:each="codeUser:${codeUsers}">
            <div class="personal-r-tit">
                <h3>个人资料</h3>
            </div>

            <div class="data-con">
                <!--上传头像-->
                <div class="dt1">
                    <form th:action="@{/mc/logged/userImage(userNo=${codeUsers.get(0).getUserNo()})}" method="post" enctype="multipart/form-data">
                    <p class="f-l">当前头像：</p>
                    <div class="touxiang f-l">
                         <span class="btn btn-success fileinput-button  layui-btn">
                            <span>上传</span>
                            <input type="file" class="btn btn-success fileinput-button "
                                   id="xdaTanFileImg" onchange="xmTanUploadImg(this)"
                                   accept="image/*"  name="userImage" />
                            </span>
                        <div class="tu f-l">
                            <span th:if="${codeUsers.get(0).getImage()}">
                            <a href="#">
                                <img  th:src="@{'/article/'+ ${codeUsers.get(0).getImage()}}" />
                            </a>
                            </span>
                            <span th:unless="${codeUsers.get(0).getImage()}">
                             <img th:src="@{/images/center.png}">
                              </span>
                            <img id="xmTanImg" style="position: absolute;left:3px;top:3px;width: 74px;height: 75px"/>
                        </div>
<br>

                            <button class="layui-btn" style="float:left;height: 34px;width: 65px"  type="submit">保存</button>

                        <div style="clear:both;"></div>
                    </div>
                    </form>
                    <div style="clear:both;"></div>
                </div>
                <!--头像上传结束-->
                <hr style="color: #8888cc;height: 3px">
                <!--基本信息的展示及修改-->
                <form action=""th:action="@{/mc/logged/changeInformation}" >
                <div class="dt1">
                    <p class="dt-p f-l">用户编号：</p>
                    <input type="text"th:value="${codeUser.userNo}" class="form-control" id="userNo" readonly="readonly" name="userNo" placeholder="用户编号" />
                    <div style="clear:both;"></div>
                </div>
                <div class="dt1">
                    <p class="dt-p f-l">工作邮箱*：</p>
                    <input type="text"id="email"th:value="${codeUser.email}"class="form-control" placeholder="请输入邮箱" name="email" required="required" value="zhao601884596" />
                    <div style="clear:both;"></div>
                </div>

                <div class="dt1">
                    <p class="dt-p f-l">工作手机*：</p>
                    <input type="text"id="phoneNum"
                           placeholder="请输入手机号"th:value="${codeUser.phoneNum}"class="form-control" name="phoneNum" required="required" value="12345678910" />
                    <button type="submit" class="layui-btn" style="margin-left: 3px;margin-top: 5px" >修改</button>
                    <div style="clear:both;"></div>
                </div>
                </form>

                <hr style="color: #8888cc;height: 3px">
                <span th:switch="${codeUser.identity}">
                <span th:case="1">
                <div class="dt1">

                    <p class="dt-p f-l">姓名：</p>
                    <input type="text"name="name" readonly="readonly"
                           placeholder="姓名"class="form-control" value="12345678910" th:value="${codeUserID.get(0).getName()}"/>
                    <div style="clear:both;"></div>
                </div>
                <div class="dt1">
                    <p class="dt-p f-l">身份证：</p>
                    <input type="text"name="userId"class="form-control" readonly="readonly"
                           placeholder="身份证" value="12345678910" th:value="${codeUserID.get(0).getIdNumber()}"/>
                    <div style="clear:both;"></div>
                </div>

                </span>
                    <span th:case="2">
                <div class="dt1">

                    <p class="dt-p f-l">姓名：</p>
                    <input type="text"name="name"class="form-control" readonly="readonly"
                           placeholder="姓名" value="12345678910"/>
                    <div style="clear:both;"></div>
                </div>
                <div class="dt1">
                    <p class="dt-p f-l">身份证：</p>
                    <input type="text"name="userId"class="form-control" readonly="readonly"
                           placeholder="身份证" value="12345678910" />
                    <div style="clear:both;"></div>
                </div>
                </span>
                </span>
                <div class="dt1"th:each="skill:${skills}">
                     <p class="dt-p f-l" >擅长技能：</p>
                    <span th:switch="${skill.java}" style="margin-left: 15px;">
                        <span th:case="1"><button type="button" class="layui-btn" style="margin-top: 10px">Java</button></span>
                                        <span th:case="2"></span>
                                    </span>
                    <span th:switch="${skill.net}" style="margin-left: 10px">
                                        <span th:case="1"><button type="layui-btn" class="layui-btn" style="margin-top: 10px">net</button></span>
                                        <span th:case="2"></span>
                                    </span>
                    <span th:switch="${skill.c}" style="margin-left: 10px">
                                        <span th:case="1"><button type="layui-btn" class="layui-btn" style="margin-top: 10px">c</button></span>
                                        <span th:case="2"></span>
                                    </span>
                    <span th:switch="${skill.asp}" style="margin-left: 10px">
                              <span th:case="1"><button type="button" class="layui-btn" style="margin-top: 10px">asp</button></span>
                              <span th:case="2"></span>
                              </span>
                              <span th:switch="${skill.php}" style="margin-left: 10px">
                                        <span th:case="1"><button type="button" class="layui-btn" style="margin-top: 10px">php</button></span>
                                        <span th:case="2"></span>
                              </span>
                              <span th:switch="${skill.bigdata}" style="margin-left: 10px;margin-top: 20px">
                                        <span th:case="1"><button type="button" class="layui-btn" style="margin-top: 10px">大数据</button></span>
                                        <span th:case="2"></span>
                              </span>
                              <span style="margin-left: 120px;margin-top: 20px">
                                    <button type="button" class="layui-btn" style="margin-top: 10px" onclick="f('ycbc')">修改技能</button>
                              </span>
                      <div style="clear:both;"></div>
                </div>

                    <div id="ycbc" style="display:none">
                        <table style="width: 30% ;margin-left: 100px">
                            <tr>
                                <th><input type="checkbox" lay-skin="primary" onclick="checkAll(this)" /></th>
                                <th style="font-size: 18px">技能方向</th>
                            </tr>
                            <div id="ListBackground">
                                <tr th:each="codeSkill:${codeSkills}">
                                    <td><input type="checkbox" lay-skin="primary" name="cks" id="product"th:value="${codeSkill.id}" onclick="check()" /> </td>
                                    <td ><button type="button" class="layui-btn " style="margin-top: 10px;font-size: 18px" th:text="${codeSkill.direction}">技能方向</button></td>
                                </tr>
                                </c:forEach>
                            </div>

                            <button  class="layui-btn" style="margin-top: 10px;margin-left:320px;margin-bottom:-190px" type="button"  onclick="save()"  value="保存修改">保存</button>
                        </table>
                    </div>
                <!--个人信息结束-->
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>




<!--联系我们-->
<div class="contact-container">
    <div class="contact-connect-container">
        <div class="button-container">
            <img th:src="@{/images/contacts.png}"/><span style="margin-left: 5px;">联系我们</span>
        </div>
        <div class="pop" style="display: none;">
            <div class="word" style="text-align: center;"><span style="font-size: 12px;">在线咨询请扫描下面二维码👇</span></div>
            <div style="height: 120px;width: 120px;margin:20px 22px;">
                <img th:src="@{/images/QR.jpg}" style="width: 120px;height: 120px;margin-top: -15px;"/>
            </div>
        </div>
    </div>
</div>



<footer class="footerBg">
    <div class="container"><span class="footer_logo"><img th:src="@{/mb/images/mclogo.png}"></span>
        <span style="padding-right: 10px" class="CopyRight_name">码虫互联网服务外包平台 </span></div>

</footer>

</body>
<script th:src="@{/mb/js/jquery-3.3.1.min.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/jquery.js}" type="text/javascript"></script>
<script type="text/javascript" th:src="@{/js/Contacts.js}"></script>
<script type="text/javascript" th:src="@{/js/information.js}"></script>
<script type="text/javascript" th:src="@{/dist/js/bootstrap.min.js}"></script>
<script type="text/javascript">
    function f(a) {
        var obj = document.getElementById(a);
        if (obj.style.display == "") {
            obj.style.display = "none";
        } else {
            obj.style.display = "";
        }
    }
</script>


<script type="text/javascript">

    //选择图片，马上预览
    function xmTanUploadImg(obj) {
        var file = obj.files[0];

        console.log(obj);
        console.log(file);
        console.log("file.size = " + file.size);  //file.size 单位为byte

        var reader = new FileReader();

        //读取文件过程方法
        reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        }
        reader.onload = function (e) {
            console.log("成功读取....");

            var img = document.getElementById("xmTanImg");
            img.src = e.target.result;
            //或者 img.src = this.result;  //e.target == this
        }

        reader.readAsDataURL(file)
    }
</script>



</html>